<template>
  <div style="padding-top: 20px">
    <input type="file" name="file" class="upload__input" @change="uploadChange">
    <p style="padding-top: 10px;color: red">*大小请控制在200M之内！</p>
    <div class="imgSrc">
      <img v-if="this.echo" :src="echo">
      <img v-else src="../../../static/img/img.png"/>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      echo: String
    },
    data() {
      return {
        files: '',
      }
    },
    methods: {
      uploadChange(event) {
        if (event.target.files.length > 0) {
          this.files = event.target.files[0];
          this.getBase64(event.target, (url) => {
            this.picture = 'data:image/png;base64,' + url;
          });
        }
        this.$emit('returnValue', this.files);
      },
      getBase64(file, callback) {
        let maxWidth = 640;
        if (file.files && file.files[0]) {
          var thisFile = file.files[0];
          if (thisFile.size > 201920000) {
            alert("大小不能超过200M");
            return
          }
          ;
          var reader = new FileReader();
          reader.onload = function (event) {
            var imgUrl = event.target.result;
            var img = new Image();
            img.onload = function () {
              var canvasId = 'canvasBase64Imgid',
                canvas = document.getElementById(canvasId);
              if (canvas != null) {
                document.body.removeChild(canvas);
              }
              var canvas = document.createElement("canvas");
              canvas.innerHTML = 'New Canvas';
              canvas.setAttribute("id", canvasId);
              canvas.style.display = 'none';
              document.body.appendChild(canvas);
              canvas.width = this.width;
              canvas.height = this.height;
              var imageWidth = this.width,
                imageHeight = this.height;
              if (this.width > maxWidth) {
                imageWidth = maxWidth;
                imageHeight = this.height * maxWidth / this.width;
                canvas.width = imageWidth;
                canvas.height = imageHeight;
              }
              var context = canvas.getContext('2d');
              context.clearRect(0, 0, imageWidth, imageHeight);
              context.drawImage(this, 0, 0, imageWidth, imageHeight);
              var base64 = canvas.toDataURL('image/png', 1);
              var imgbase = base64.substr(22);
              callback(imgbase)
            };
            img.src = imgUrl;
          };
          reader.readAsDataURL(file.files[0]);
        }
      },
    }
  }
</script>

<style scoped>
  .upload__input::-webkit-file-upload-button {
    background: #efeeee;
    color: #333;
    border: 0;
    border-radius: 5px;
    font-size: 12px;
    padding: 10px 15px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .1), 0 0 10px rgba(0, 0, 0, .12);
  }

  .imgSrc {
    margin-top: 5px;
    /*    border: 1px solid #ccc;*/
    width: 200px;
  }

  .imgSrc img {
    padding: 5px;
    width: 200px;
  }
</style>
